<template>
  <div style="background-color: #e5273b; padding-bottom: 0.8rem">
    <div class="integral" ref="integral">
      <div class="Mobile_points"></div>
      <div class="Voucher_package"></div>
      <div class="inputPhone">
        <van-form>
          <van-field
            v-model="phone"
            class="phone"
            name="phone"
            type="tel"
            maxlength="11"
            placeholder="请输入11位移动手机号码"
            @blur="iphonBlur()"
          >
            <div slot="left-icon" style="width: 0.5rem">
              <img src="../assets/phone.gif" />
            </div>
          </van-field>
          <van-field
            v-model="code"
            type="text"
            maxlength="6"
            placeholder="请输入验证码"
            class="codeIcon"
            @blur="iphonCode()"
          >
            <div slot="left-icon" style="width: 0.5rem">
              <img src="../assets/code.gif" />
            </div>
            <van-button
              v-if="!isSendCode"
              slot="button"
              type="warning"
              size="mini"
              style="width: 2rem;display:flex;justify-content:center;"
              round
              @click.stop="getCode"
            >
              获取验证码
            </van-button>
            <van-button slot="button" type="warning" size="mini"   style="width: 2rem;display:flex;justify-content:center;" round v-else>
              {{ codeNum }}s后重试
            </van-button>
          </van-field>
        </van-form>
      </div>
      <div class="integral_btn" @click="claimNow" ref="integralImg">
        <!-- <img src="../assets/form_submit.f2aed870.png" alt="" /> -->
        <div v-if="loading" class="load" >
          <van-loading  type="spinner" color="#1989fa" />
        </div>
      </div>
     
      <div class="service"><a>专属客户经理: 4008256216</a></div>
    </div>
    <div class="activity">
      <div>
        <div class="title">
          <div class="line"></div>
          <div>活动流程</div>
          <div class="line"></div>
        </div>
        <!-- 飞猪 -->
        <div v-if="brand == 'FZ'" class="content">
          <p>
            1.本产品需使用移动积分兑换,兑换的产品为飞猪优惠券包+红包,积分兑换规则以移动官方细则为准如有疑问请联系专属客户经理:4008256216
          </p>
          <p>2.兑换成功后，红包自动发放至零钱；</p>
          <p>
            3.飞猪优惠券包使用路径,
            登录飞猪App,在“我的”-->“红包卡券”中查看并使用；
          </p>
          <p>
            4.本产品为虚拟电子券，一经兑换成功后概不退换:优惠券不兑现金不找零，超额需补差价请在兑换前确认，谨慎兑换；
          </p>
          <p>5.暂不支持开具发票；</p>
          <p>
            6.如果用户存在违规行为(包括但不限于洗钱虚假交易、恶意套现)，将取消用户的兑换资格、并有权撤销相关违规交易；
          </p>
          <p>
            7.活动暂不支持北京，贵州，山西，安徽，广西，浙江，重庆用户参与。
          </p>
          <p>8.用户每日只可参与一次。</p>
        </div>
        <!-- 品胜-->
        <div v-if="brand == 'PS'" class="content">
          <p>
            1.本产品需使用移动消费积分进行兑换，积分兑换规则以移动官方细则为准。如有疑问，请联系客服4008256216(客服工作时间:9:30-17:30)
          </p>
          <p>
            2.兑换成功后，微信红包自动发放至微信零钱;品胜权益包可点击进入“品胜权益商城”(http://jifen.pisen.com.cn/index.html#/)，使用兑换的手机号码注册，即可查看和使用。
          </p>
          <p>
            3.品胜权益包为组合礼包券，组合礼包含:
            品类满减券一张+通用券抵用券一张(此产品直接在品胜积分商城使用)。
          </p>
          <p class="pinsheng"><img src="../assets/gzt.png" alt="" /></p>
          <p>
            4.本券有效期为自兑换后
            10天内有效，过期作废，请在有效期内使用。优惠券不可以登加使用，每笔订单限用一张
          </p>
          <p>
            5.本产品为虚拟电子券，一经兑换成功后，概不退换;优惠券不兑现金不找零，超额需补差价请在兑换前确认，谨慎兑换
          </p>
          <p>6.暂不支持开具发票。</p>
          <p>
            7.如果用户存在违规行为
            (包括但不限于洗钱虚假交易、恶意套现)，将取消用户的兑换资格、并有权撤销相关违规交易。
          </p>
          <p>
            8.活动暂不支持北京，贵州，山西，安徽，广西，浙江，重庆用户参与。
          </p>
        </div>
        <!-- 顺丰 -->
        <div v-if="brand == 'SF'" class="content">
          <p>
            1.本产品需使用移动积分兑换,兑换的产品为顺丰同城优惠券包+红包.积分兑换规则以移动官方细则为准如有疑问请联系专属客户经理:
            4008256216
          </p>
          <p>2.兑换成功后，红包自动发放至零钱;</p>
          <p>
            3.顺丰同城优惠券包使用路径，使用相同手机号码登录顺丰同城APP/小程序，下单支付自动勾选使用优惠券。也可登录顺丰同城;
          </p>
          <p>4.本产品自兑换之日起30天内有效，请在有效期内尽快使用;</p>
          <p>
            5.本产品为虚拟电子券，一经兑换成功后概不退换优惠券不兑现金不找零，超额需补差价请在兑换前确认，谨慎兑换;
          </p>
          <p>6.暂不支持开具发票;</p>
          <p>
            7.如果用户存在违规行为(包括但不限于洗钱虚假交易、恶意套现)，将取消用户的兑换资格、并有权撤销相关违规交易;
          </p>
          <p>8.活动暂不支持北京，贵州，山西，安徽，广西，浙江，重庆用户参与;</p>
          <p>9.活动期内用户只可参与一次;</p>
        </div>
      </div>
    </div>
    <div class="contactService" @click="kefu">
      <img src="../assets/service_btn.bbf26eb1.png" alt="" />
    </div>
    <!-- 客服弹框 -->
    <van-popup v-model="kefuShow">
      <div class="kefu">
        4008256216
      </div>
    </van-popup>
  </div>
</template>


<script>
import { sendCode, login } from "../api/main.js";
import shunfeng from '../assets/shunfengBg.jpg';
import feizhu from '../assets/feizhuBg.jpg';
import axios from "axios";


export default {
  name: "integral",
  components: {},
  data() {
    return {
      phone: "", //手机号
      code: "", //验证码
      codeNum: "60", //倒计时
      isSendCode: false,
        brand:'FZ',
        loading:false,
        kefuShow:false,
    };
  },
  created(){
    this.brand= this.$route.query.brand
  },
  mounted() { 
   // 顺丰
    if(this.brand == 'SF'){
      this.$refs.integral.style.backgroundImage = `url(${shunfeng})`
    }
     // 飞猪
    if(this.brand == 'FZ'){
      this.$refs.integral.style.backgroundImage = `url(${feizhu})`
    }
  },
  methods: {
    // 客服弹窗
    kefu(){
      this.kefuShow = true
    },
    // 立即领取
    claimNow() {
      this.loading = true
      if (this.iphonBlur() && this.iphonCode()) {
        login(`code=${this.code}&userMobile=${this.phone}`).then((res) => {
          if(res.status == 200 && res.data.BSFIT_EXPIRATION != null){
            this.loading = false
            this.$router.push('/exchange?brand='+this.brand)
          }else{
            this.$toast.fail(res.data.resultMessage);
            this.loading = false
          }
        }).catch((err)=>{
          this.$toast.fail("服务器开小差了，请稍后重试");
          this.loading = false
        });
      }
    },
    // 发送验证码
    getCode() {
      this.isSendCode = true;
      let timer = setInterval(() => {
        this.codeNum = this.codeNum - 1;
        if (this.codeNum <= 0) {
          this.isSendCode = false;
          this.codeNum = 60;
          clearInterval(timer);
        }
      }, 1000);
      sendCode(this.phone).then((res) => {
          if (res.data.resultCode == 200) {
            this.$toast.success("验证码获取成功");
          } 
        })
        .catch((err) => {
          this.$toast.fail("服务器开小差了，请稍后重试");
        });
    },
    // 校验手机号
    iphonBlur() {
      let iphonTest =
        /^1(34[0-8]|705|(3[5-9]|5[0127-9]|8[23478]|78)\d)\d{7}$/.test(
          this.phone
        );
      if (!this.phone) {
        this.loading = false
        this.$toast("手机号码不能为空");
        return;
      }
      if (!iphonTest) {
        this.loading = false
        this.$toast("请输入11位移动手机号码");
        return;
      }
      return true;
    },
    // 校验验证码
    iphonCode() {
      let codeTest = /^\d{6}/.test(this.code);
      if (!this.code) {
        this.loading = false
        this.$toast("验证码不能为空");
        return;
      } else if (!codeTest) {
        this.loading = false
        this.$toast("请输入6位验证码");
        return;
      }
      return true;
    }
  },
};
</script>

<style lang="scss" scoped>
.integral {
  // background: url("../assets/shunfengBg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .Mobile_points {
    width: 100%;
    flex: 0 0 2.5rem;
    position: relative;
    .text {
      position: absolute;
      bottom: 0.3rem;
      left: 0;
      right: 0;
      font-size: 0.4rem;
      color: #873100;
    }
  }
  .Voucher_package {
    margin-top: 1rem;
    width: 100%;
    flex: 0 0 10rem;
    // background: url("../assets/sku_bg.f10b7d9e.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .title {
      color: #d23d53;
      font-size: 0.5rem;
      font-weight: 600;
      display: flex;
      padding-top: 0.4rem;

      .line {
        width: 100px;
        height: 0.05rem;
        background: #d23d53;
        margin: auto;
      }
    }
    .illustrate {
      margin-top: 0.2rem;
      color: #d07e84;
    }
    .package {
      color: #d23d53;
      font-size: 0.4rem;
      position: absolute;
      left: 1rem;
      bottom: 4rem;
    }
    .money {
      color: #d23d53;
      position: absolute;
      right: 1.5rem;
      top: 2.7rem;
      :nth-child(1) {
        font-size: 0.4rem;
      }
      :nth-child(2) {
        font-size: 1rem;
      }
    }
    .jifen {
      position: absolute;
      bottom: 0.5rem;
      font-size: 0.4rem;
      left: 0;
      right: 0;
      color: orange;
    }
  }
  .inputPhone {
    .phone {
      margin: 0.5rem 0;
      :first-child {
        display: flex;
        align-items: center;
        img {
          width: 100%;
          // display: block;
        }
      }
    }
    .codeIcon {
      :first-child {
        display: flex;
        align-items: center;
        img {
          width: 100%;
          // display: block;
        }
      }
    }
  }
  // 动画
  @keyframes animate {
    0% {
      width: 70%;
    }
    50% {
      width: 80%;
    }
    100% {
      width: 70%;
    }
  }
  .integral_btn {
    width: 70%;
    height: 1.3rem;
    margin: auto;
    margin-top: 0.5rem;
    animation: animate 1.1s infinite;
    position: relative;
    background-image: url('../assets/form_submit.f2aed870.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .load{
      position: absolute;
      left:0;
      right:0;
      top:0.1rem;
      background: rgba(255,255,255,0.6);
      z-index: 9;
      height: 100%;
      width: 100%;
      line-height: 1.3rem;
    }
    img {
      width: 100%;
      // height: 100%;
    }
  }
  .service {
    margin: 0.8rem;
    font-size: 0.5rem;
    border-bottom: 1px solid #685c5e;
    color: #685c5e;
  }
}
.activity {
  padding: 0.5rem;
  width: 8rem;
  // height: 3rem;
  background: white;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;
  .title {
    color: #d23d53;
    font-size: 0.5rem;
    font-weight: 600;
    display: flex;
    .line {
      width: 100px;
      height: 0.05rem;
      background: #d23d53;
      margin: auto;
    }
  }
  .content {
    margin-top: 0.3rem;
    text-align: left;
    .pinsheng {
      // width: 10rem;
      height: 0 0 5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.popup {
  width: 8rem;
  //   height: 7.3rem;
  background: white;
  .header {
    height: 1.7rem;
    width: 100%;
    img {
      width: 100%;
    }
  }
  .tip {
    color: #d6394a;
    margin: 0.5rem;
  }
  .btn {
    border-radius: 20rem;
    background: #d6394a;
    color: white;
    width: 5rem;
    height: 1rem;
    margin-bottom: 0.6rem;
  }
}
.van-cell {
  border-radius: 0.5rem;
}
.contactService {
  width: 1.5rem;
  height: 1.5rem;
  position: fixed;
  right: 0;
  top: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
.kefu{
  font-size: 0.6rem;
  padding: 0.8rem ;
  background: white;
}
</style>